<template>
  <div class="injector-level-three">
    <div class="level-indicator">层级 3</div>
    <p>最深层级也能直接访问顶层数据:</p>
    <div class="theme-display" :style="{ backgroundColor: injectedThemeColor }">
      <p>主题: {{ injectedTheme }}</p>
      <p>计数: {{ injectedCounter }}</p>
    </div>
    <button @click="incrementCounter">增加计数</button>
  </div>
</template>

<script setup>
import { inject } from 'vue'

// 最深层级也能直接从顶层Provider注入数据
const injectedTheme = inject('theme')
const injectedThemeColor = inject('themeColor')
const injectedCounter = inject('counter')
const incrementCounter = inject('incrementCounter')
</script>

<style scoped>
.injector-level-three {
  padding: 15px;
  margin: 15px 0 15px 20px;
  background-color: #f8f4e8;
  border-radius: 6px;
  border-left: 3px solid #f39c12;
  position: relative;
}

.level-indicator {
  position: absolute;
  top: -10px;
  left: -10px;
  background-color: #f39c12;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.theme-display {
  padding: 15px;
  margin: 10px 0;
  border-radius: 6px;
  color: white;
  text-align: center;
}

button {
  padding: 6px 12px;
  background-color: #9b59b6;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #8e44ad;
}
</style>